<!-- 43 create by hxg 2021/12/20  -->
<template>
  <div>
    <a-space class="common-button-group">
      <a-button type="primary" :loading="searchBtnLoading" @click="getList">{{
        $t("common_query")
      }}</a-button>
    </a-space>
    <t-query-form
      layout="inline"
      ref="queryForm"
      group="PcPlanFeol"
      :model="queryForm"
    >
      <a-row :gutter="[16, 0]">
        <a-col :span="6">
          <a-form-item
            :label="$t('T9_shopId')"
            name="shopId"
            prop="shopId"
            :rules="{
              required: true,
              message: $t('T9_shopId'),
              trigger: 'change',
            }"
          >
            <a-select
              v-model:value="queryForm.shopId"
              class="select-width"
              @change="changeShopId"
            >
              <a-select-option
                v-for="item in shopIdArr"
                :key="item.shopId"
                :value="item.shopId"
              >
                {{ item.shopId }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item
            :label="$t('T9_year')"
            name="year"
            prop="year"
            :rules="{
              required: true,
              message: $t('T9_year'),
              trigger: 'change',
            }"
          >
            <a-select
              v-model:value="queryForm.year"
              class="select-width"
              @change="yearId"
            >
              <a-select-option
                v-for="item in yearArr"
                :key="item.year"
                :value="item.year"
              >
                {{ item.year }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item
            :label="$t('T9_month')"
            name="month"
            prop="month"
            :rules="{
              required: true,
              message: $t('T9_month'),
              trigger: 'change',
            }"
          >
            <a-select v-model:value="queryForm.month" class="select-width">
              <a-select-option
                v-for="item in monthArr"
                :key="item.month"
                :value="item.month"
              >
                {{ item.month }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
    </t-query-form>
    <a-row
      type="flex"
      justify="space-between"
      align="middle"
      class="global-oper-row mt-2"
    >
      <a-col :span="15" class="global-oper-row-title">{{
        $t("T9_monthlyPlanList")
      }}</a-col>
      <a-col :span="3" class="global-oper-row-extra">
        <a-button type="primary">{{ $t("T9_remove") }}</a-button>
      </a-col>
      <a-col :span="3" class="global-oper-row-extra">
        <a-button>{{ $t("t9_toExcel") }}</a-button>
      </a-col>
    </a-row>
    <div class="tableArea">
      <div class="left">
        <t-table
          :data="table.monthPlanList"
          :radio-config="{ labelField: 'name' }"
        >
          <t-column type="checkbox" width="60" />
          <t-column field="productId" :title="$t('T9_productId')" />
          <t-column field="productVer" :title="$t('T9_productVer')" />
          <t-column field="sourcePart" :title="$t('T9_sourcePart')" />
          <t-column field="owner" :title="$t('T9_owner')" />
          <t-column field="ownerType" :title="$t('T9_ownerType')" />
          <t-column field="totalPlan" :title="$t('T9_totalPlan')" />
          <t-column field="alreadyInput" :title="$t('T9_alreadyInput')" />
          <t-column field="experimentNo" :title="$t('T9_experimentNo')" />
        </t-table>
      </div>
      <div class="right">
        <t-table :data="table.rightList" :radio-config="{ labelField: 'name' }">
          <template v-for="(item, index) in rightColums" :key="index">
            <t-column field="item" :title="$t(`${item.prop}`)"> </t-column>
          </template>
        </t-table>
      </div>
    </div>
    <a-row
      type="flex"
      justify="space-between"
      align="middle"
      class="global-oper-row mt-2"
    >
      <a-col :span="15" class="global-oper-row-title">{{
        $t("T9_monthlyPlan")
      }}</a-col>
      <a-col :span="3" class="global-oper-row-extra">
        <a-button type="primary">{{ $t("T9_update") }}</a-button>
      </a-col>
      <a-col :span="3" class="global-oper-row-extra">
        <a-button type="primary">{{ $t("t9_importFromExcel ") }}</a-button>
      </a-col>
    </a-row>
    <t-query-form
      layout="inline"
      ref="dataForm"
      :model="footForm"
      class="footQueryForm"
    >
      <a-row :gutter="[0, 0]">
        <a-col :span="6">
          <a-form-item
            :label="$t('T9_productId')"
            name="productId"
            prop="productId"
            :rules="{
              required: true,
              message: $t('T9_productId'),
              trigger: 'change',
            }"
          >
            <a-select v-model:value="dataForm.productId" class="select-width">
              <a-select-option
                v-for="item in productIdArr"
                :key="item.productId"
                :value="item.productId"
              >
                {{ item }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item
            :label="$t('T9_sourcePart')"
            name="sourcePart"
            prop="sourcePart"
            :rules="{
              required: true,
              message: $t('T9_sourcePart'),
              trigger: 'change',
            }"
          >
            <a-select v-model:value="dataForm.sourcePart" class="select-width">
              <a-select-option
                v-for="item in sourcePartArr"
                :key="item.sourcePart"
                :value="item.sourcePart"
              >
                {{ item.sourcePart }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item
            :label="$t('T9_owner')"
            name="owner"
            prop="owner"
            :rules="{
              required: true,
              message: $t('T9_owner'),
              trigger: 'change',
            }"
          >
            <a-select v-model:value="dataForm.owner" class="select-width">
              <a-select-option
                v-for="item in ownerArr"
                :key="item.owner"
                :value="item.owner"
              >
                {{ item.owner }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="3">
            <a-button type="primary">{{$t('T9_add')}}</a-button>
        </a-col>
        <a-col :span="6">
          <a-form-item
            :label="$t('T9_glassQty')"
            name="glassQty"
            prop="glassQty"
            :rules="{
              required: true,
              message: $t('T9_glassQty'),
              trigger: 'change',
            }"
          >
            <a-select v-model:value="dataForm.glassQty" class="select-width">
              <a-select-option
                v-for="item in glassQtyArr"
                :key="item.glassQty"
                :value="item.glassQty"
              >
                {{ item.glassQty }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item
            :label="$t('T9_date')"
            name="date"
            prop="date"
            :rules="{
              required: true,
              message: $t('T9_date'),
              trigger: 'change',
            }"
          >
            <a-range-picker
              v-model:value="dataForm.date"
              :show-time="{ format: 'HH:mm' }"
              format="YYYY-MM-DD HH:mm"
              :placeholder="['Start Time', 'End Time']"
              @change="onChange"
              @ok="onOk"
            />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item
            :label="$t('T9_experimentNO')"
            name="experimentNO"
            prop="experimentNO"
            :rules="{
              required: true,
              message: $t('T9_experimentNO'),
              trigger: 'change',
            }"
          >
            <a-select
              v-model:value="dataForm.experimentNO"
              class="select-width"
            >
              <a-select-option
                v-for="item in experimentNOArr"
                :key="item.experimentNO"
                :value="item.experimentNO"
              >
                {{ item.experimentNO }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
    </t-query-form>
    <t-query-form
      layout="inline"
      ref="dataForm"
      :model="footForm"
      class="footQueryForm"
    >
      <a-row :gutter="[16, 0]">
        <a-col :span="22">
          <a-form-item
            :label="$t('T9_comment')"
            name="comment"
            prop="comment"
            :rules="{
              required: true,
              message: $t('T9_comment'),
              trigger: 'change',
            }"
          >
            <a-input v-model:value="footForm.comment" />
          </a-form-item>
        </a-col>
        <a-col :span="2" style="text-align:right;padding-right:0">
          <a-button type="primary">{{$t('T9_confirm')}}</a-button>
        </a-col>
      </a-row>
    </t-query-form>
  </div>
</template>

<script>
  import { defineComponent } from 'vue'
  import moment from 'moment'
  import {
    getShopId,
    getBayId,
    getEqpId,
    getPortId,
    getOwnerType,
    getOwnerId,
    getList
  } from '@/api/common'
  import { getCurrentDate } from '@/utils/utils'

  export default defineComponent({
    name: 'PcPlanFeol',
    components: {},
    data() {
      return {
        searchBtnLoading: false,
        table: {
          list: []
        },
        rightColums: [
          { label: '1', prop: '1' },
          { label: '2', prop: '2' },
          { label: '3', prop: '3' },
          { label: '4', prop: '4' },
          { label: '5', prop: '5' },
          { label: '6', prop: '6' },
          { label: '7', prop: '7' },
          { label: '8', prop: '8' },
          { label: '9', prop: '9' },
          { label: '10', prop: '10' },
          { label: '11', prop: '11' },
          { label: '12', prop: '12' }
        ],
        shopIdArr: [],
        cstIdArr: [],
        boxIdArr: [],
        queryForm: {
          shopId: 'CELL',
          cstId: '',
          boxId: ''
        },
        dataForm: {
          productId: '',
          sourcePart: '',
          owner: '',
          date: [],
          glassQty: '',
          experimentNO: "'"
        },
        footForm: {
          comment: ''
        }
      }
    },
    computed: {},
    watch: {},
    created() {
      this.getBayId()
      this.getShopId()
      // this.getOwnerType()
      this.queryForm.Date = [
        moment(getCurrentDate(), 'YYYY-MM-DD HH:mm'),
        moment(getCurrentDate(1), 'YYYY-MM-DD HH:mm')
      ]
    },
    methods: {
      onChange(value, dates) {
        this.queryForm.Date = dates
        console.log('Selected Time: ', this.queryForm.Date[0])
      },
      getList() {
        const obj = {
          dtoName: 'PortHistoryDTO',
          startTime:
            this.queryForm.Date.length !== 0
              ? this.queryForm.Date[0].format('YYYYMMDDHHmmss') * 1000
              : null,
          endTime:
            this.queryForm.Date.length !== 0
              ? this.queryForm.Date[1].format('YYYYMMDDHHmmss') * 1000
              : null,
          eqpId: this.queryForm.eqpId,
          portId: this.queryForm.portId,
          queryId: 'GetPortHistoryList',
          version: '80002',
          menuName: 'portHistory',
          usage: 'queryPortHistoryList'
        }
        getList(obj).then((res) => {
          this.table = res
        })
      },
      handleSearch() {},
      changeShopId(val) {
        if (val) {
          this.getBayId()
        }
      },
      changeCstSpec() {},
      changeOwnerType(val) {
        if (val) {
          this.getOwner()
        }
      },
      changeBayId(val) {
        if (val) {
          this.getEqpId()
        }
      },
      getShopId() {
        const params = {
          userGroup: 'CellPIOper'
        }
        getShopId(params).then((res) => {
          this.shopIdArr = res
        })
      },
      getBayId() {
        const params = {
          shopId: this.queryForm.shopId
        }
        getBayId(params).then((res) => {
          this.bayIdArr = res
        })
      },
      getEqpId() {
        const params = {
          bayId: this.queryForm.bayId,
          shopId: this.queryForm.shopId
        }
        getEqpId(params).then((res) => {
          this.eqpIdArr = res
        })
      },
      getPortIdList() {
        const params = {
          eqpId: this.queryForm.eqpId
        }
        getPortId(params).then((res) => {
          this.portIdArr = res
        })
      },
      getOwnerType() {
        getOwnerType().then((res) => {
          this.ownerTypeArr = res
        })
      },
      getOwner() {
        const params = {
          ownerType: this.queryForm.ownerType,
          shopId: this.queryForm.shopId
        }
        getOwnerId(params).then((res) => {
          this.ownerArr = res
        })
      }
    }
  })
</script>
<style lang="less" scoped>
/deep/ .ant-row,
.ant-row:after,
.ant-row:before {
  display: flex;
  flex: 1;
}
.tableArea {
  width: 100%;
  height: auto;
  min-height: 15vh;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  .left {
    width: 60%;
    height: auto;
  }
  .right {
    width: 38%;
    height: auto;
  }
}
.footBtn {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
</style>
